<script setup lang="ts" name="LabelsAdd">
const emits = defineEmits(['close', 'submit'])
/*========================================>( 模型属性 )<========================================*/
const show = ref<boolean>(false)
const labelName = ref<string>()
/*========================================>( 作用域值 )<========================================*/

/*========================================>( 文档属性 )<========================================*/

/*========================================>( 计算属性 )<========================================*/

/*========================================>( 普通方法 )<========================================*/
//关闭本modal
const close = () => {
  emits('close')
}
/*========================================>( 监听方法 )<========================================*/
//监听提交
const handleSubmit = () => {
  // emits('close')
  if (!labelName.value || !labelName.value.trim().length) {
    return;
  }
  emits('submit', labelName.value)
}
/*========================================>( 钩子函数 )<========================================*/

/*========================================>( 默    认 )<========================================*/
show.value = true



</script>
<template>
  <el-dialog class="labels-add" v-model="show" width="75%" title="添加组标签" @close="close" destroy-on-close>
    <div class="main-box">
      <div class="name">名称：</div>
      <el-input v-model="labelName" style="width: 240px" placeholder="输入标签名称" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleSubmit">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss">
.labels-add {
  .main-box {
    width: 90%;
    height: 50px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .name {
      width: 50px;
    }
  }
}
</style>
